<template>
  <div id="devicelist">
    <Title class="title">
      <template #title> 设备列表 </template>
    </Title>

    <div class="option">
      <Space size="large" wrap>
        创建时间
        <DatePicker
          type="date"
          placeholder="选择日期"
          style="width: 200px"
          placement="bottom"
          :transfer="true"
        />
      </Space>

      <Space>
        设备类型
        <Select v-model="model" style="width: 200px" :transfer="true">
          <Option
            v-for="item in dedviceList"
            :value="item.value"
            :key="item.value"
            >{{ item.label }}</Option
          >
        </Select>
      </Space>

      <Space size="large">
        设备ID
        <Input
          suffix="ios-search"
          placeholder="Enter text"
          style="width: auto"
          search
          v-model="deviceID"
        />
      </Space>

      <Space class="btn">
        <Button type="primary" @click="Getdevicelist">查询</Button>
        <Button type="primary" @click="add">新增</Button>
      </Space>
    </div>

    <div class="view">
      <Table border :columns="columns" :data="datas">
        <template #action="{ index }">
          <Button
            type="primary"
            size="small"
            style="margin-right: 5px"
            @click="show(index)"
            >修改</Button
          >
          <Button type="error" size="small" @click="remove(index)">删除</Button>
        </template>
      </Table>

      <Page
        :total="total"
        page-size="8"
        show-total
        show-elevator
        @on-change="changePage"
      />
    </div>

    <!-- 修改 -->
    <div class="change">
      <Modal
        v-model="modal"
        :draggable="true"
        :reset-drag-position="true"
        :width="width"
        :title="title"
        @on-ok="ok"
        @on-cancel="cancel"
      >
        <!-- 设备名称： -->
        <input type="text" placeholder="设备名称：" v-model="change.name" />
        <!-- 设备用户： -->
        <input
          type="text"
          placeholder="设备用户："
          v-model="change.employeeId"
        />
        <!-- 设备添加时间： -->
        <!-- <input type="text" placeholder="设备添加时间："> -->
        <!-- 设备类型： -->
        <input type="text" placeholder="设备类型：" v-model="change.type" />
      </Modal>
    </div>
    <!-- 新增 -->
    <Modal
      v-model="modal1"
      :draggable="true"
      :reset-drag-position="true"
      title="新增设备"
      @on-ok="addok"
      @on-cancel="cancel"
    >
      <div>
        设备ID：<input type="text" placeholder="" v-model="adddevice.id" />
      </div>
      <div>设备名称：<input type="text" v-model="adddevice.name" /></div>
      <div>设备用户：<input type="text" v-model="adddevice.employeeId" /></div>
      <div>设备类型：<input type="text" v-model="adddevice.type" /></div>
    </Modal>

    <!-- 删除 -->
    <Modal
      v-model="modal2"
      :draggable="true"
      :reset-drag-position="true"
      :title="title1"
      @on-ok="deleteok"
      @on-cancel="cancel"
    >
      <p style="color: red">此操作不可逆</p>
    </Modal>
  </div>
</template>

<script >
import {
  getdevicelist,
  changedevice,
  adddevice,
  deletedevice,
} from "../api.js";
import Title from "@/components/device/Title.vue";
import {
  Space,
  DatePicker,
  Select,
  Option,
  Input,
  Button,
  Table,
  Page,
  Modal,
  Notice,
} from "view-ui-plus";
export default {
  name: "devicelist",
  components: {
    Title,
    Space,
    DatePicker,
    Select,
    Option,
    Input,
    Button,
    Table,
    Page,
    Modal,
    Notice,
  },
  data() {
    return {
      modal: false,
      modal1: false,
      modal2: false,
      title: "",
      title1: "新增设备",
      width: 100,
      deviceList: [
        {
          value: "测报灯",
          label: " 测报灯",
        },
        {
          value: "杀虫灯",
          label: "杀虫灯",
        },
        {
          value: "监控",
          label: "监控",
        },
      ],
      model: "",
      columns: [
        {
          title: "设备ID",
          key: "id",
          width: "",

          align: "center",
          fixed: "left",
        },
        {
          title: "设备名称",
          key: "name",
          width: "",

          align: "center",
        },
        {
          title: "设备用户",
          key: "employeeId",
          width: "",

          align: "center",
        },
        {
          title: "设备添加时间",
          key: "createTime",
          width: "",

          align: "center",
        },
        {
          title: "设备类型",
          key: "type",
          width: "",

          align: "center",
        },
        {
          title: "操作",
          slot: "action",
          align: "center",
          width: "",
          fixed: "right",
        },
      ],
      datas: [],
      deviceID: "",
      page: {
        pageNo: 1,
        pageSize: 8,
      },
      total: "",
      change: {
        id: "",
        name: "",
        employeeId: "",
        type: "",
      },
      adddevice: {
        employeeId: "",
        id: "",
        name: "",
        type: "",
        createTime: new Date(),
      },
      deletedevice: {
        ids: "",
      },

      bigwidth: "",
      width: 1200,
    };
  },
  created() {
    this.getwidth();
  },

  mounted() {
    this.Getdevicelist();
  },

  methods: {
    async Getdevicelist() {
      await getdevicelist("/device/page", {
        id: this.deviceID,
        pageNo: this.page.pageNo,
        pageSize: this.page.pageSize,
      }).then((Response) => {
        console.log(Response);
        this.total = Response.data.total;
        this.datas = Response.data.records;

        this.deviceID = "";
      });
    },
    add() {
      this.modal1 = true;
    },
    show(index) {
      this.modal = true;
      console.log(this.datas[index]);
      this.change.id = this.datas[index].id;
      this.change.name = this.datas[index].name;
      this.change.type = this.datas[index].type;
      this.change.employeeId = this.datas[index].employeeId;
      this.title = "修改设备" + this.datas[index].id;
    },

    remove(index) {
      console.log("index", index);
      this.modal2 = true;
      this.deletedevice.ids = this.datas[index].id;
      this.title1 = "删除设备" + this.datas[index].id;
    },
    ok() {
      changedevice("/device", {
        id: this.change.id,
        employeeId: this.change.employeeId,
        name: this.change.name,
        type: this.change.type,
      }).then((res) => {
        console.log(res);
        let a = this.change.id;
        console.log("a", a);
        this.datas[a - 1].name = this.change.name;
        this.datas[a - 1].type = this.change.type;
        this.datas[a - 1].employeeId = this.change.employeeId;
        Notice.success({
          title: "修改成功",
          deration: 1,
        });
      });
    },
    addok() {
      adddevice("/device", {
        id: this.adddevice.id,
        employeeId: this.adddevice.employeeId,
        name: this.adddevice.name,
        type: this.adddevice.type,
      }).then((res) => {
        console.log(res);
        if (res.code == 1) {
          this.Getdevicelist();
          Notice.success({
            title: "添加成功",
            deration: 1,
          });
        }
      });
    },
    deleteok() {
      deletedevice("/device", {
        ids: this.deletedevice.ids,
      }).then((res) => {
        console.log(res);
        if (res.code == 1) {
          this.Getdevicelist();
          Notice.success({
            title: "删除成功",
            deration: 1,
          });
        }
      });
    },
    cancel() {},
    getwidth() {
      console.log("device", window.innerWidth);
      this.width = window.innerWidth;
      this.bigwidth = window.innerWidth > 720 ? true : false;
      if (window.innerWidth < 720) {
        this.changecellwidth();
      }
    },
    changecellwidth() {
      for (let i = 0; i < this.columns.length; i++) {
        this.columns[i].width = 100;
      }
      this.columns[0].width = 80;
      this.columns[5].width = 90;
      this.columns[3].width = 180;
    },
    changePage(pageid) {
      this.deviceID = null;
      console.log(pageid);
      this.page.pageNo = pageid;
      this.Getdevicelist();
    },
  },
};
</script>

<style lang="less" scoped>
#devicelist {
  font-size: calc(100vw * 30 / 1920);

  .view {
    width: 100%;
  }
}

.change {
  div {
    margin: 1rem 0 !important;
  }
}

@media screen and (max-width: 821px) {
  #devicelist {
    .change {
      width: 100%;
    }
  }
}
</style>

<style lang="less">
.title {
  margin-top: 25px;
  margin-bottom: 20px;
}
.option {
  font-size: calc(100vw * 20 / 1920);

  .ivu-space {
    gap: 0 !important;
    margin-top: 1rem;
    padding-right: 3rem;
  }

  .ivu-space-item {
    margin-left: 1rem;
  }
}

.view {
  .ivu-table-wrapper {
    z-index: 1 !important;
    margin-top: 2rem;
  }

  .ivu-page {
    width: 100%;
    text-align: center;
    margin: 10px 0;
  }
}

@media screen and (max-width: 720px) {
  .option {
    font-size: calc(100vw * 70 / 1920);
  }

  .view {
    .ivu-table-wrapper {
      margin-top: 2rem;
    }
  }

  .btn {
    margin-left: 25%;
  }
}
</style>